<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript"
        src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=Ir7z3sSO2Lhwg0AprFzCzWd1VWP2Y9kZ"></script>
    <title>单个地址解析</title>
    <style>
        body,
        html {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        #container {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        #result {
            position: fixed;
            top: 10px;
            left: 10px;
            width: 250px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background: #fff;
            box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
            border-radius: 7px;
            z-index: 99;
        }
    </style>
</head>

<body>
    <div id='container'></div>
    <div id='result'>北京市海淀区上地10街</div>
    <script>
        var h5Port;
        window.addEventListener('message', function (event) {
            if (event.data === '__init_port__') {
                if (event.ports[0] !== null) {
                    h5Port = event.ports[0]; // 1. 保存从ets侧发送过来的端口
                    h5Port.onmessage = function (event) {
                        // 2. 接收ets侧发送过来的消息.
                        var msg = 'Got message from ets:';
                        var data = event.data;
                        result.innerHTML = data
                        if (typeof (data) === 'string') {
                            console.info(`received string message from html5, string is: ${data}`);
                            alert(data)
                            var myGeo = new BMapGL.Geocoder();
                            myGeo.getPoint(data, function (point) {
                                if (point) {

                                    map.centerAndZoom(point, 16);
                                    map.addOverlay(new BMapGL.Marker(point, { title: data }))
                                    result.innerHTML =data
                                } else {
                                    alert('您选择的地址没有解析到结果！');
                                }
                            })
                        } else if (typeof (data) === 'object') {
                            if (result instanceof ArrayBuffer) {
                                console.info(`received arraybuffer from html5, length is: ${data.byteLength}`);
                                msg = msg + 'lenght is ' + data.byteLength;
                            } else {
                                console.info('not support');
                            }
                        } else {
                            console.info('not support');
                        }

                    }
                }
            }
        })
        var map = new BMapGL.Map('container');
        map.centerAndZoom(new BMapGL.Point(116.331398, 39.897445), 12);
        var result = document.getElementById("result")
        //创建地址解析器实例
        // var myGeo = new BMapGL.Geocoder();
        // // 将地址解析结果显示在地图上，并调整地图视野
        // myGeo.getPoint('湖北省武汉市武昌区湖北大学', function (point) {
        //     if (point) {
        //         map.centerAndZoom(point, 16);
        //         map.addOverlay(new BMapGL.Marker(point, { title: '湖北省武汉市武昌区湖北大学' }))
        //         result.innerHTML = "湖北省武汉市武昌区湖北大学"
        //     } else {
        //         alert('您选择的地址没有解析到结果！');
        //     }
        // })

    </script>
</body>

</html>